
<template>
  <div>
    <!-- 搜索 -->
    <HeadSeach ref="headSeach">
      <div class="card dis-flex flex-x-center flex-y-center" @click="showCart">
        <el-badge :value="purchaseCart.total?purchaseCart.total:''" class="item" size="mini">
          <i class="el-icon-shopping-cart-1" />
        </el-badge>
        <label class="f-14 cart-name">采购车</label>
      </div>
    </HeadSeach>
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-refresh" size="mini">同步库存</el-button>
        <Content>
          <!-- :span-method="objectSpanMethod" -->
          <el-table ref="table" :data="list.data" style="width: 100%" size="small" row-key="id" height="100%" class="table">
            <el-table-column type="selection" width="30" :reserve-selection="true" />
            <el-table-column label="图片" width="60" fixed>
              <template slot-scope="scope">
                <el-image v-viewer :src="scope.row.imgurl?scope.row.imgurl[0]:''">
                  <div slot="error" class="image-slot" />
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="物料名称" width="150" prop="bom_name" fixed />
            <el-table-column label="物料sku编码" width="180" prop="bom_sku_id" />
            <el-table-column label="颜色" width="70" prop="color_name" />
            <el-table-column label="规格" width="60" prop="spec_two_code" />
            <!-- <el-table-column label="生产状态" width="80">
              <template slot-scope="scope">
                <div v-if="scope.row.stop_production == 1" class="row_div danger_row">停产</div>
                <div v-if="scope.row.stop_production == 0" class="row_div success_row">做货</div>
              </template>
            </el-table-column> -->
            <el-table-column label="30天消耗" width="80" prop="consume_30day" />
            <el-table-column label="采购紧急度" width="80">
              <template slot="header">
                <label class="col-blue">采购紧急度</label>
              </template>
              <template slot-scope="scope">
                <div>
                  <span v-for="item in 5" :key="item">
                    <svg-icon v-if="item <= scope.row.emergency_degree" icon-class="icon_star" />
                    <svg-icon v-else icon-class="icon_star_black" />
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="最低采购数" width="80" prop="purchase_num" />
            <el-table-column label="总库存数" width="80" prop="stock_all" />
            <el-table-column label="当前仓库存" width="80" prop="stock" />
            <el-table-column label="安全库存下限" width="92" prop="stock_safe_down">
              <template slot="header">
                <label class="col-red">安全库存下限</label>
              </template>
            </el-table-column>
            <el-table-column label="安全库存上限" width="92" prop="stock_safe_up" />
            <el-table-column label="可用库存" width="80" prop="stock_actual" />
            <el-table-column label="采购在途数(预计到货时间)" width="190" prop="spec_value">
              <template slot="header">
                <div class="dis-flex">
                  <label class="label-name">采购在途数(预计到货时间)</label>
                  <el-popover placement="top" width="300" trigger="hover">
                    <div class="dis-flex">
                      <i class="el-icon-info color-blue" />
                      <label class="f-12 info-name">累计所有生效(并且未完成)的采购单并减去对应已入库的数量，超额入库可能会显示负数</label>
                    </div>
                    <i slot="reference" class="iconfont icon-question" />
                  </el-popover>
                </div>
              </template>
              <template slot-scope="scope">
                <label>{{ scope.row.stock_intransit }}</label>
                <label>{{ scope.row.stock_reserve_date }}</label>
              </template>
            </el-table-column>
            <el-table-column label="已锁库存" width="80" prop="stock_reserve">
              <template slot-scope="scope">
                <label>{{ scope.row.stock_reserve }}</label>
                <el-popover placement="left-start" width="600" trigger="click" @show="showGoods(scope.row.bom_sku_id,scope.row.storage_sn)">
                  <el-table :data="goodsList" style="width: 100%" size="small">
                    <el-table-column label="图片" width="80">
                      <template slot-scope="scopeChilden">
                        <el-image v-viewer :src="scopeChilden.row.imgurl">
                          <div slot="error" class="image-slot" />
                        </el-image>
                      </template>
                    </el-table-column>
                    <el-table-column label="产品名称" width="180" prop="goods_name" />
                    <el-table-column label="产品编码" width="120" prop="goods_sku_code" />
                    <el-table-column label="颜色" width="60" prop="color_name" />
                    <el-table-column label="规格" width="50" prop="spec_value" />
                    <el-table-column label="锁定数" prop="lock_goods_num" />
                  </el-table>
                  <i slot="reference" class="el-icon-goods refresh" />
                </el-popover>

              </template>
            </el-table-column>
            <el-table-column label="虚拟库存" width="80" prop="stock_virtual" />
            <el-table-column label="操作" width="200" fixed="right">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="addCart(scope.row.bom_sku_id)">加入购物车</el-link>
                <el-link type="primary" :underline="false">库存明细</el-link>
                <el-link type="primary" :underline="false" @click="showLog(scope.row.goods_sku_id)">操作日志</el-link>
              </template>
            </el-table-column>
          </el-table>
          <Pagination ref="pagination" />
        </Content>
      </div>
      <Cart ref="card" key="card" @confirm="confirm" />
      <Dialog ref="dialog" />
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Cart from '@/components/Stock/cart'
import { Stock } from '@/api/stock/stock'
import { PurchaseCart } from '@/api/stock/cart'
import { Storage } from '@/api/storage/storage'
import Dialog from './components/dialog'
import HeadSeach from '@/components/HeadSeach'
export default {
  name: 'MaterialStock',
  components: {
    Pagination,
    Cart,
    Dialog,
    HeadSeach
  },
  data() {
    return {
      seach: {},
      list: {
        data: []
      },
      pagination: {
        page: 1,
        per_page: 15
      },
      minHeight: 500,
      listStorage: [], // 仓库
      spanArr: [],
      pos: 0,
      contentSpanArr: [],
      position: 0,
      purchaseCart: {},
      goods_sku_code: '',
      goodsList: []
    }
  },
  created() {
    this.getGoodsStock()
    this.getCartList()
  },
  mounted() {
    this.assembleSeachData()
  },
  methods: {
    // 组装搜索数据
    async assembleSeachData() {
      this.listStorage = await Storage.listStorage().then((res) => { return res.data }).catch(() => {})
      const searchData = {
        label: '物料搜索',
        size: 'small',
        model: {
          storage_sn: '',
          name: '',
          bom_sku_id: ''
        },
        options: [
          {
            tag: 'Select',
            prop: 'storage_sn',
            placeholder: '仓库',
            data: this.listStorage,
            showPropData: {
              label: 'storage_name',
              value: 'storage_sn'
            }
          },
          {
            tag: 'Input',
            prop: 'name',
            placeholder: '物料名称'
          },
          {
            tag: 'Input',
            prop: 'bom_sku_id',
            placeholder: '物料SKU编码'
          }],
        cb: (data) => {
          this.seach = data
          this.pagination.page = 1
          this.getGoodsStock()
        }
      }
      this.$refs.headSeach.init(searchData)
    },
    getGoodsStock() {
      Stock.pageStorageBomStock({ ...this.pagination, ...this.seach }).then((res) => {
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getGoodsStock()
      } })
    },
    // 成功
    async confirm(val) {
      await this.getCartList(val)
      this.$refs.card.show(this.purchaseCart)
    },
    // 显示采购车
    showCart() {
      this.$refs.card.show(this.purchaseCart)
    },
    // 采购车列表
    async getCartList(seach = {}) {
      console.log(seach)
      const type = {
        type: 'all'
      }
      await PurchaseCart.pagePurchaseCart({ ...type, ...seach }).then((res) => {
        this.purchaseCart = res.data
      }).catch(() => {})
    },
    // 加入购物车
    addCart(bom_sku_ids) {
      PurchaseCart.addPurchaseCart({ bom_sku_ids }).then((res) => {
        this.$message.success('加购成功')
        this.getCartList()
      }).catch(() => {})
    },
    // 操作日志
    showLog(goods_sku_ids) {
      this.$refs.dialog.showLog(goods_sku_ids)
    },
    // 锁定商品列表
    showGoods(bom_sku_code, storage_sn) {
      Stock.listStorageGoodsBomStockLock({ bom_sku_code, storage_sn }).then((res) => {
        this.goodsList = res.data
      }).catch(() => {})
    }
  }
}

</script>
<style lang="scss" scoped>
.table{
  .iconfont{
  font-size: 12px;
  }
  .label-name{
    margin-right: 5px;
  }
  ::v-deep  .el-rate__icon{
    margin-right: 0;
  }
  .col-blue{
      color: #0091FF;
  }
  .col-red{
      color: #E02020;
  }
  .refresh{
    margin-left: 5px;
  }

}
  .color-blue{
    color: #1677FF;
    margin-right: 5px;
  }
  .info-name{
    color: #666666;
  }
  // 采购车
  .seach-box{
    padding: 0 0 0 10px;
      .card{
      width: 110px;
      height: 55px;
      background: #0091FF;
      border-radius: 8px;
      color: white;
      .cart-name{
        margin-left: 10px;
      }
    }
  }
//   抽屉
  .app-content{
    position: relative;
    .el-drawer__wrapper{
      position: absolute;
    }
  }
  .flex-box-2{
    flex: 2;
  }

</style>

